<template>
  <div style="display: flex;">
    <div class="left_div">
      <ul>
        <li class="left_li">
          <div>
            <img src="../../../assets/img/admin/A_information .png" alt="">
          </div>
          <p @click="PersonalInformation()">我的资料</p></li>
        <!-- <li class="left_li">
          <div>
            <img src="../../../assets/img/admin/i_course .png" alt="">
          </div>
          <p @click="mycourse()">我的课程</p></li> -->
      </ul>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  methods: {
    PersonalInformation() {
      // this.$router.replace('/secondsheets/ThatPerson/PersonalInformation')
    },
    mycourse() {
      this.$router.replace('/secondsheets/ThatPerson/mycourse')
    }
  }
}
</script>

<style>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

}

.left_div {
  width: 13vw;
  height: 100vh;
  background-color: rgb(223, 229, 229);
  /* box-shadow: 5px 0 5px rgba(0, 0, 0, 0.5); */
}

ul {
  padding-top: 2vh;
}

.left_li {

  width: 100%;
  height: 6vh;
  display: flex;
  color: #000;
  overflow: hidden;
  z-index: 1;
  background-color: rgb(223, 229, 229);
  transition: background-color 0.5s ease;
}

li:hover {
  background-color: rgb(201, 242, 242);
}

li div {

  margin-left: 0.2vw;
  padding: 0.2vh 0.5vw 0.5vh 0.5vw;
  border-radius: 15px;
}

li i {
  width: 30px;
}

li p {
  padding: 1vh 0 0 1.3vw;
  font-size: 18px;
}

li img {
  height: 5vh;
}

</style>